<template>
  <div>
    <base-input v-bind="$attrs" v-on="$listeners"></base-input>
    <!-- 要想上级的组件能快速使用本组件的属性，必须要加上 v-bind="$attrs" -->
    <el-input v-model="input" v-bind="$attrs" placeholder="我是子组件的input"></el-input>
  </div>
</template>

<script>
import BaseInput from './BaseInput.vue'

export default {
  inheritAttrs: false,
  components: {
    'base-input': BaseInput
  },
  data() {
    return {
      input: '',
      // data 里 disabled: this.$attrs.disabled 是不行的
    }
  },
  computed: {
    // 计算属性可行。或者上面那样直接$attrs.type也可行。
    disabled: {
      get() {
        return this.$attrs.disabled
      }
    }
  },
  mounted() {
    // this 上本来就有 $attrs，$attrs 自动收集了没有在 props 定义的属性
    console.log('fu', this.$attrs)
  },
  methods: {}
}
</script>

<style></style>
